<template>
  <div class="container">
    <el-card class="el-card_body">
      <!-- 顶栏 -->
      <el-row justify="space-between" align="middle" type="flex">
        <el-col>
          <span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button size="small" type="success">
              <i
                class="el-icon-edit"
                @click="
                  $router.push(
                    `questions/new`
                  )
                "
              />
              新增试题</el-button
            >
          </el-row>
        </el-col>
      </el-row>

      <!-- 中间form -->
      <el-form :model="formDatas" ref="screenForm">
        <el-row type="table">
          <el-col :span="6">
            <el-form-item
              prop="subject"
              label="学科"
              size="small"
              label-width="80px"
            >
              <el-select
                size="small"
                style="width: 100%"
                v-model="formDatas.subject"
                @change="get2dir(formDatas.subject), get2tag(formDatas.subject)"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="directoryName"
              label="二级目录"
              size="small"
              label-width="80px"
            >
              <el-select
                size="small"
                style="width: 100%"
                v-model="formDatas.directoryName"
              >
                <el-option
                  :key="dirList.id"
                  :label="dirList.directoryName"
                  :value="dirList.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="tagName"
              label="标签"
              size="small"
              label-width="80px"
            >
              <el-select
                size="small"
                style="width: 100%"
                v-model="formDatas.tagName"
              >
                <el-option
                  :key="tagList.id"
                  :label="tagList.tagName"
                  :value="tagList.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="keyword"
              label="关键字"
              size="small"
              label-width="80px"
            >
              <el-input
                size="small"
                style="width: 100%"
                v-model="formDatas.keyword"
                placeholder="根据题干搜索"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="questype"
              label="试题类型"
              size="small"
              label-width="80px"
            >
              <el-select
                size="small"
                style="width: 100%"
                v-model="formDatas.questype"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="difftype"
              label="难度"
              size="small"
              label-width="80px"
            >
              <el-select
                size="small"
                style="width: 100%"
                v-model="formDatas.difftype"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="dirtype"
              label="方向"
              size="small"
              label-width="80px"
            >
              <el-select
                size="small"
                style="width: 100%"
                v-model="formDatas.dirtype"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="userID"
              label="录入人"
              size="small"
              label-width="80px"
            >
              <el-select
                size="small"
                style="width: 100%"
                v-model="formDatas.userID"
              >
                <el-option
                  v-for="item in users"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="remarks"
              label="题目备注"
              size="small"
              label-width="80px"
            >
              <el-input
                size="small"
                style="width: 100%"
                v-model="formDatas.remarks"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="comsimple"
              label="企业简称"
              size="small"
              label-width="80px"
            >
              <el-input
                size="small"
                style="width: 100%"
                v-model="formDatas.comsimple"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="city"
              label="城市"
              size="small"
              label-width="80px"
            >
              <el-select
                size="small"
                style="width: 48%; margin-right: 2%"
                v-model="formDatas.city"
                @change="getArea(formDatas.city)"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.city"
                  :label="item.city"
                  :value="item.city"
                >
                </el-option>
              </el-select>
              <el-select
                size="small"
                style="width: 50%"
                v-model="formDatas.area"
              >
                <el-option
                  v-for="item in areaList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              size="small"
              label-width="80px"
              style="text-align: right"
            >
              <el-button size="small" @click="delFormData">清除</el-button>
              <el-button size="small" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 警示框 -->
      <el-alert type="info" show-icon class="el-alert_info">
        <span slot="title">共{{ page.total }}条数据</span>
      </el-alert>

      <!-- 底部展示表格 -->
      <el-table :data="formData">
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="目录" prop="catalog"></el-table-column>
        <el-table-column
          label="题型"
          prop="questionType"
          :formatter="formatQuestionType"
        ></el-table-column>
        <el-table-column label="题干" prop="question">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          prop="difficulty"
          :formatter="formatDifficulty"
        ></el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button @click="getQuestionDetails(row)" type="text" size="small"
              ><i class="el-icon-view"
            /></el-button>
            <el-button
              @click="$router.push(`new?id=${row.id}`)"
              type="text"
              size="small"
              ><i class="el-icon-edit"
            /></el-button>
            <el-button @click="delQuestionDetails(row)" type="text" size="small"
              ><i class="el-icon-delete"
            /></el-button>
            <el-button
              @click="add2ChoiceQuestions(row)"
              type="text"
              size="small"
              ><i class="el-icon-check"
            /></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 翻页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          :current-page="page.page"
          :page-size="page.pagesize"
          :page-sizes="page.pageSize"
          :total="page.total"
          layout="sizes, prev, pager, next, jumper"
          @current-change="changePage"
          @size-change="changePageSize"
        />
      </el-row>
      <QuestionDetails
        :show-dialog.sync="showDialog"
        :id="questionDetails.id"
        :options="questionDetails.options"
        :videoURL="questionDetails.videoURL"
        :answerID="questionDetails.remarks"
        :answer="questionDetails.answer"
        :tags="questionDetails.tags"
        :subject="questionDetails.subjectName"
        :catalog="questionDetails.catalogID"
        :direction="questionDetails.direction"
        :difficulty="questionDetails.difficulty"
      />
    </el-card>
  </div>
</template>

<script>
import QuestionDetails from '@/module-hmmm/components/question-details.vue'
import {
  getBaseQuestions,
  getQuestionDetials,
  delQuestionDetails
} from '@/api/hmmm/questions.js'
import { getSubjects } from '@/api/hmmm/subjects.js'
import { getDirDetail } from '@/api/hmmm/directorys.js'
import { getTagDetials } from '@/api/hmmm/tags.js'
import { getUsers } from '@/api/base/users.js'

import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { datas } from '@/api/hmmm/citys.js'
export default {
  name: 'questions-list',
  components: { QuestionDetails },
  data () {
    return {
      formDatas: {
        subject: '',
        directoryName: '',
        tagName: '',
        keyword: '', // 中间关键字
        questype: '',
        difftype: '',
        dirtype: '',
        userID: '',
        remarks: '', // 备注
        comsimple: '', // 企业简称
        city: '',
        area: ''
      },
      formData: [],
      subjectList: [], // 中间学科数据
      dirList: [], // 二级目录
      tagList: [],
      questionType, // 题型
      difficulty, // 难度
      direction, // 方向
      users: [], // 录入人
      cityList: datas,
      areaList: [],
      showDialog: false,
      page: {
        page: 1, // 当前页码
        pagesize: null, // 一页显示条数
        total: null,
        pageSize: [5, 10, 15]
      },
      questionDetails: {}
    }
  },
  created () {
    this.getBaseQuestions()
    this.getSubjectList()
    this.getUsers()
  },
  methods: {
    // 获取题库
    async getBaseQuestions () {
      const data = await getBaseQuestions(this.page)
      this.formData = data.data.items
      this.page.total = data.data.counts
      this.page.pagesize = data.data.pagesize
    },
    // 格式化形式
    formatDifficulty (row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = difficulty.find(
        (item) => item.value.toString() === cellValue
      )
      return obj ? obj.label : '未知'
    },
    formatQuestionType (row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = questionType.find(
        (item) => item.value.toString() === cellValue
      )
      return obj ? obj.label : '未知'
    },
    async getQuestionDetails (id) {
      const res = await getQuestionDetials(id)
      this.questionDetails = res.data
      this.showDialog = true
      console.log(this.showDialog, '111')
    },
    async getSubjectList () {
      const data = await getSubjects()
      this.subjectList = data.data
    },
    async get2dir (id) {
      const search = this.subjectList.find((it) => it.value === id)
      const res = await getDirDetail(search)
      this.dirList = res.data
    },
    async get2tag (id) {
      const search = this.subjectList.find((it) => it.value === id)
      const res = await getTagDetials(search)
      this.tagList = res.data
    },
    async getUsers () {
      const data = await getUsers()
      this.users = data.data
    },
    getArea (city) {
      this.areaList = datas.find((it) => it.city === city).area
    },
    delFormData () {
      this.formDatas = {
        subject: '',
        directoryName: '',
        tagName: '',
        keyword: '', // 中间关键字
        questype: '',
        difftype: '',
        dirtype: '',
        userID: '',
        remarks: '', // 备注
        comsimple: '', // 企业简称
        city: '',
        area: ''
      }
      this.$refs.screenForm.resetFields()
    },
    async delQuestionDetails (it) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delQuestionDetails(it)
        this.getBaseQuestions()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        console.log(error)
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    async add2ChoiceQuestions (it) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        await delQuestionDetails(it)
        this.getBaseQuestions()
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
      } catch (error) {
        console.log(error)
        this.$message({
          type: 'info',
          message: '已取消加入'
        })
      }
    },
    changePage (currPage) {
      this.page.page = currPage // 赋值页码
      this.getBaseQuestions(currPage) // 拉取数据
    },
    changePageSize (currPage) {
      this.page.pagesize = currPage // 赋值页码
      this.getBaseQuestions(currPage) // 拉取数据
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 10px 0;
  padding: 0 10px;
  .el-card_body {
    padding: 20px;
  }
  .el-alert_info {
    margin-bottom: 15px;
  }
}
</style>
